<template>
  <div class="mainCon groupCheck">
    <div class="containercontent">
      <!-- <p>如该批次已制定某人进行校核，那么此处进行权限判断，无权限的用户只能查看，只有校核人才可以选择、校核该批次</p>
      <p>
        已指派校核人员的测试批，将在其个人主页进行待办提醒
      </p> -->
      <div class="selectw100 seachTip">
        <div class="inlineblock  infoitem">
          <div class="inlineblock verticalmiddle">
            能力参数
          </div>
          <div class="inlineblock verticalmiddle informationItem">
            <el-select v-model="detectability" filterable remote :remote-method="readDetectList" style="width:100%;"
              size="mini" ref="selectAbility" @change="getTestBatchs(testItemQuery,'search')">
              <el-option v-for="item in abilityOptions" :key="item.id" :label="'【' + item.version + '】' + item.name " :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="inlineblock verticalmiddle infoitem">
          <div class="inlineblock verticalmiddle">
            任务
          </div>
          <div class="inlineblock verticalmiddle informationItem" style="width:calc(100% - 50px)">
            <el-select v-model="task" filterable style="width:100%;" size="mini" @change="getTestBatchs(testItemQuery,'search')">
              <el-option v-for="(item,index) in taskList" :key="item.index" :label="item" :value="item">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="inlineblock  infoitem">
          <div class="inlineblock">
            检测单筛选
          </div>
          <div class="inlineblock  informationItem">
            <el-select v-model="testValue" size="mini" style="margin-bottom:10px;" @change="getTestBatchs(testItemQuery,'search')">
              <el-option v-for="item in testOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="inlineblock  infoitem">
          <div class="inlineblock verticalmiddle">
            时间范围
          </div>
          <div class="inlineblock  informationItem">
            <el-date-picker v-model="dateFrame" size="mini" type="daterange" @change="getTestBatchs(testItemQuery,'search')"
              range-separator="-" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
        </div>
        <div class="inlineblock  infoitem">
          <div class="inlineblock verticalmiddle searchIcon" style="margin-left:15px;">
            <el-button size="mini" @click="getTestBatchs(testItemQuery,'search')">搜索</el-button>

          </div>
          <div class="inlineblock searchIcon">
            <el-button size="mini" @click="emptySearch">清空</el-button>
          </div>

        </div>
      </div>
      <div class="separaterowTable">
        <div class="tableTittle">
          <div><span class="fontImpact">1</span><span>检测列表</span></div>
        </div>
        <el-table :data="tableData" style="width: 100%" class="tableCon" size="mini" highlight-current-row
          cell-class-name="batchtablecell">
          <el-table-column prop="pihao" label="序号" width="55px">
            <template slot-scope="scope">
              {{scope.$index+(testItemQuery.page - 1) * testItemQuery.pageCount + 1}}
            </template>
          </el-table-column>
          <el-table-column prop="code" label="检测单编号" min-width="110px" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="detectabilityName" label="能力参数" min-width="170px" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="任务名称" min-width="170px" property="taskNames" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{scope.row.taskNames == undefined ? '---':scope.row.taskNames}}
            </template>
          </el-table-column>
          <!--<el-table-column prop="equipmentName" label="仪器" min-width="100px">
					</el-table-column>
					<el-table-column prop="assistEquipmentName" label="辅助仪器" min-width="100px">
					</el-table-column>-->
          <el-table-column prop="analystName" label="检测人员" min-width="70px">
          </el-table-column>
          <el-table-column prop="checkerName" label="校核人员" min-width="70px">
          </el-table-column>
          <el-table-column prop="auditorName" label="审核人员" min-width="70px">
            <template slot-scope="scope">
              {{scope.row.auditorName == undefined ? '---' : scope.row.auditorName}}
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" :formatter="formatterStatus" min-width="70px">
          </el-table-column>
          <el-table-column prop="updateTime" label="修改时间" width="130px" :formatter="formatterDate">
          </el-table-column>
          <el-table-column prop="caozuo" label="操作" min-width="110px" v-if="userOpernation.check.display">
            <template slot-scope="scope">
              <el-button @click="showresultentrypenal(scope.row)" type="text" size="small" :disabled="!scope.row.isDiff"
                v-if="!scope.row.doSub">数据校核</el-button>
              <el-button @click="showSubCheck(scope.row)" type="text" size="small" :disabled="!scope.row.isDiff" v-if="scope.row.doSub">数据校核</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block changepages">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="testItemQuery.page"
            :page-sizes="[20,30,40]" :page-size="testItemQuery.pageCount" layout="total, sizes, prev, pager, next, jumper"
            :total="rowNumber">
          </el-pagination>
        </div>
      </div>
    </div>
    <data-check :addVisible.sync="resultentryshow" :testpanelData="testpanelData" :selectData.sync="selectRow"></data-check>
    <subDataEntry :addVisible.sync="subResultentry" :subTestpanelData.sync="subTestpanelData" :subModel="subModel"></subDataEntry>
  </div>
</template>

<script>
  import $ from 'jquery'
  import {
    mapState
  } from 'vuex'
  const dataCheck = () => import('./children/dataCheck.vue');
  const subDataEntry = () => import('./children/subDataEntry.vue');

  export default {
    data() {
      let that = this;
      return {
        testItemQuery: { //分页信息
          page: 1,
          pageCount: 20
        },
        rowNumber: 0,
        testValue: 1, //检测单筛选
        testOptions: [ //检测筛选选项
          {
            value: 1,
            label: '我的'
          },
          {
            value: 0,
            label: '全部'
          }
        ],
        userInfo: {},
        detectability: '', //搜索框能力绑定值
        abilityOptions: [], //所有能力参数
        dateFrame: '', //时间范围
        tableData: [],
        testpanelData: {},
        resultentryshow: false,
        resultentryshow: false,
        subResultentry: false, //分包的设置
        subTestpanelData: {},
        subModel: "myCheck",
        taskList: [],
        task: "",
        selectRow:{},

      }

    },
    props: ['userOpernation'],
    components: {
      dataCheck,
      subDataEntry
    },
    created() {
      if (this.daibanItemShow) {
        if (this.daibanItem.businessBranch == 2) { //businessBranch为2代表是分包的检测单
          this.showSubCheck(this.daibanItem)
        } else {
          this.showresultentrypenal(this.daibanItem)
        }

        this.$store.commit('passDaibanItemShow', false)
      }

    },
    watch: {
      daibanItem(newer, older) {
        if (this.daibanItemShow) {
          if (this.daibanItem.businessBranch == 2) { //businessBranch为2代表是分包的检测单
            this.showSubCheck(this.daibanItem)
          } else {
            this.showresultentrypenal(this.daibanItem)
          }
          this.$store.commit('passDaibanItemShow', false)
        }
      },
      // 监听分页变化
      testItemQuery: {
        handler(val, oldVal) {
          this.getTestBatchs(this.testItemQuery)
        },
        deep: true
      },
    },
    mounted() {
      this.userInfo = JSON.parse(sessionStorage.getItem('laboratoryAccountInfo')); //获取存储的用户信息
      this.readTask()
      this.readDetectList('');
      this.$store.dispatch('dogetDictionary')
      this.getTestBatchs(this.testItemQuery);

    },
    computed: {
      ...mapState(['testBatchStatus', 'daibanItemShow', 'daibanItem']),

    },
    methods: {
      // 处理时间
      formatterDate(row, column, cellValue) {
        if (cellValue == '' || cellValue == undefined || cellValue == null) {
          return ''
        } else {
          return cellValue.substring(0, 16)
        }

      },
      emptySearch() {
        this.detectability = '';
        this.testValue = 0;
        this.dateFrame = '';
        this.task = "";
        this.getTestBatchs(this.testItemQuery, 'search')
      },
      // 处理状态
      formatterStatus(row, column, cellValue, index) {

        return this.util.changeStatus({
          cellValue: cellValue,
          list: this.testBatchStatus
        })
      },
      //   搜索能力参数
      readDetectList(item) {
        this.$http({
          method: 'post',
          apiUrl: '/technology/readDetectList.htm',
          params: {
            name: item
          },
          isJson: false
        }).then(res => {
          if (res.code == 0) {
            this.abilityOptions = res.data
          }

        })
      },
      //   搜索能力参数
      readTask() {
        this.$http({
          method: 'post',
          apiUrl: '/detection/getBatchTasks.htm',
          params: {
            status: '533'
          },
          isJson: false
        }).then(res => {
          if (res.code == 0) {
            this.taskList = res.data
          }
        })
      },
      // 检测列表数据
      getTestBatchs(parp, search) {
        var analyst = '';
        if (this.testValue == '1') {
          analyst = this.userInfo.loginid
        } else {
          analyst = '';
        };
        var dateFrame1 = null
        var dateFrame2 = null
        if (this.dateFrame == null || this.dateFrame == '') {
          dateFrame1 = null
          dateFrame2 = null
        } else {
          dateFrame1 = this.dateFrame[0]
          dateFrame2 = this.dateFrame[1]
        }

        var data = {
          detectability: this.detectability,
          analyst: analyst,
          group: 2, //代表数据校核
          status: 533,
          startTime: dateFrame1,
          endTime: dateFrame2,
          taskName: this.task
        };
        if (search != undefined) {
          this.testItemQuery.page = 1;
          data.page = 1;
          data.pageCount = parp.pageCount;
        } else {
          data.page = parp.page;
          data.pageCount = parp.pageCount;
        }
        this.$http({
          method: 'post',
          apiUrl: '/detection/getTestBatchs.htm',
          params: data,
          isJson: true
        }).then(res => {
          if (res.code == 0) {
            this.tableData = res.data;
            if (!res.pageinfo) {
              this.rowNumber = 0;
            } else if (res.pageinfo && !res.pageinfo.rowNumber) {
              this.rowNumber = 0;
            } else {
              this.rowNumber = res.pageinfo.rowNumber;
            }
          }
        })
      },
      // 检测单详情
      showresultentrypenal(row) {
        this.selectRow = row;
        this.resultentryshow = true;
        this.$http({
          method: 'post',
          apiUrl: '/detection/getTestBatchAndItem.htm',
          params: {
            id: row.id
          },
          isJson: false
        }).then(res => {
          if (res.code == 0) {
              this.testpanelData = res.data
          } else {
            this.resultentryshow = false;
          }
        })
      },
      // 分包的检测单详情
      showSubCheck(row) {
        this.$http({
          method: 'post',
          apiUrl: '/detection/getSubTestBatch.htm',
          params: {
            id: row.id
          },
          isJson: false
        }).then(res => {
          if (res.code == 0) {
            this.subTestpanelData = res.data
            this.subResultentry = true
          }
        })
      },
      handleSizeChange: function(val) {
        this.testItemQuery.pageCount = val;
      },
      handleCurrentChange: function(val) {
        this.testItemQuery.page = val;
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .groupCheck .seachTip .infoitem {
    width: calc(100%/5 - 10px)
  }

  .groupCheck .seachTip .infoitem {
    padding-right: 0;
  }

  .groupCheck .seachTip .informationItem {
    width: calc(100% - 75px)
  }

  .groupCheck .separaterowTable {
    height: calc(100% - 58px);
  }


  .itemname {
    display: inline-block;
    /*width: 19%;*/
    padding: 0 20px;
    width: 125px;
    vertical-align: middle;
  }

  .itemcontent {
    display: inline-block;
    width: calc(100% - 130px);
    vertical-align: middle;
  }

  .waitchose {
    width: calc(40% - 50px);
    display: inline-block;
  }

  .haschose {
    width: calc(60% - 55px);
    display: inline-block;
    /*vertical-align: top;*/
    float: right;
  }

  .tanchuang {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 66;
    padding: 40px;
  }

  .editpanel {
    position: absolute;
    width: 100%;
    min-height: 100%;
    /*left: 50%;
  top: 50%;*/
    top: 0;
    background-color: #fff;
    border-radius: 4px;
    padding-bottom: 20px;
    background-color: #fff;
    z-index: 4;
  }

  .penaltitle {
    /*text-align: center;*/
    /*line-height: 30px;*/
    /*font-size: 14px;
  padding: 5px 20px;
  border-bottom: 1px solid #eee;*/
  }

  .closepenal {
    /*position: absolute;
  top: 1px;
  right: 4px;
  font-size: 25px;
  cursor: pointer;
  display: flex;*/
  }

  .el-textarea {
    height: auto !important;
    /*height: auto!important;
  height: 28px!important;
    line-height: 28px!important;*/
  }

  .el-textarea__inner {
    line-height: 28px !important;
    height: 28px !important;
  }

  .standardseries {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0, 0.1);
    z-index: 4;
  }

  .standardseriespenal {
    position: absolute;
    width: 900px;
    /*height: 80%;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 5px;
    padding-bottom: 20px;
  }

  .standardseriestitle {
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-align: center;
    font-size: 20px;
  }

  .standardseriescontent {}

  .resultControlBar {
    display: inline-block;
    vertical-align: middle;
  }

  .sampleChoseBar {
    display: inline-flex;
    width: 100px;
    position: absolute;
    vertical-align: top;
    flex-direction: column;
    height: 100%;
    top: 0;
    left: calc(40% - 44px);
  }

  .sampleChoseBar>div:nth-child(1) {
    position: absolute;
    left: 50%;
    top: calc(50% - 20px);
    transform: translate(-50%, -50%);
  }

  .sampleChoseBar>div:nth-child(2) {
    position: absolute;
    left: 50%;
    top: calc(50% + 20px);
    transform: translate(-50%, -50%);
  }


  .standardseriescontent .infoitem {
    padding-right: 10px;
  }

  .standardseriescontent .infoitem>div:nth-child(1) {
    width: 162px;
    text-align: right;
  }

  .standardseriescontent .infoitem>div:nth-child(2) {
    width: calc(100% - 167px)
  }
</style>
